<template>
  <div class="coponmodel">
    <el-dialog
      :showClose="false"
      title="活动商品"
      :visible.sync="centerDialogVisibleUse"
      top
      width="100%"
      :fullscreen="true"
    >
      <div class="couponUse">
        <div class="topButton">
          <div class="topButtonLeft">
            <el-button @click="cancelgoodesmodel2">取 消</el-button>
          </div>
          <div class="topButtonRight"></div>
          <el-button
            :style="{ marginLeft: '20px' }"
            circle
            icon="el-icon-refresh-right"
            @click="Refresh"
          >
          </el-button>
        </div>

        <el-table
          class="elTable"
          v-loading="loading"
          :cell-style="{ 'text-align': 'center' }"
          :data="goodsList"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
        >
          <el-table-column type="selection" min-width="53"></el-table-column>
          <el-table-column fixed label="排序" prop="sort" min-width="70">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品" prop="name" min-width="550">
          </el-table-column>
          <el-table-column label="店铺名称" min-width="290">
            <template>
              {{ this.currentRow.mallName }}
            </template>
          </el-table-column>
          <el-table-column label="优惠卷名称" prop="couponName" min-width="290">
            <template>
              {{ this.currentRow.name }}
            </template>
          </el-table-column>
          <el-table-column label="有效开始时间" min-width="290">
            <template>
              {{ this.currentRow.startDate }}
            </template>
          </el-table-column>
          <el-table-column label="有效结束时间" min-width="300">
            <template>
              {{ this.currentRow.endDate }}
            </template>
          </el-table-column>
        </el-table>

        <div class="paging">
          <!-- <el-pagination
            background
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 40]"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination> -->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="cancelgoodesmodel2">取 消</el-button> -->
        <!-- <el-button type="primary" @click="savegoodesmodel">保 存</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  QueryCouponList,
  QueryCouponUseDetail,
  EditCoupon,
  DeleteCoupon,
  QueryCouponDetail,
  batchUpdateCoupon,
  QueryActiveGoodsList,
} from "@/api/mallApi/managementend/coupon";
export default {
  name: "ActiveGoods",
  components: {},
  props: {
    centerDialogVisibleUse: {
      type: Boolean,
      default: false,
    },
    couponId: String,
    currentRow: Object,
  },
  data() {
    return {
      searchTime: "",
      storeStatus: "", //店铺状态搜索
      mallCode: "", //店铺名称搜索
      // 添加/修改 商品弹窗
      // centerDialogVisibleUse: false,
      enterType: 0, // 默认值为1，表示从编辑按钮进入
      cancelSubmit: 0, //商品审核不能确定修改
      searchShop: "",
      goodsList: [],
      selectedRows: [], // 表格 多选内容
      isButtonDisabled: false, // checkbox 联动按钮
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      loading: false,
      couponName: "",
    };
  },
  methods: {
    formatDate(originalTimeString) {
      //console.log(originalTimeString);
      if (!originalTimeString) {
        return ""; // or any default value you prefer
      }
      const [datePart, timePart] = originalTimeString.split(" ");
      const [year, month, day] = datePart.split("-");
      return `${year}.${month}.${day}`;
    },
    getStatusText(type) {
      //0 未使用 1 已过期 2 已使用 3 已被分享领取
      switch (type) {
        case 0:
          return "未使用";
        case 1:
          return "已过期";
        case 2:
          return "已使用";
        case 3:
          return "已被分享领取";
        default:
          return "未知";
      }
    },
    cancelgoodesmodel2() {
      this.$emit("cancelgoodesmodel4", false);
    }, // 取消按钮 传值
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCouponList();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getCouponList();
    },
    // 获取商品列表
    getCouponList() {
      this.loading = true;
      const params = {
        searchBeginTime: "", //开始时间
        searchEndTime: "", //结束时间
        pageSize: this.pageSize, //分页：每页大小（默认10）
        pageNum: this.currentPage, //分页：第几页（从1开始）
        orderBy: "", //排序字段
        sortBy: "asc", //正序或者倒序排列（asc 或 desc）
        goodsIdsStr: this.currentRow.limitUsing,
      };
      //   获取店铺列表
      QueryActiveGoodsList(params)
        .then((res) => {
          //console.log("查询优惠卷列表", res);
          if (res.code !== "00000") return;
          this.goodsList = res.data.rows;
          this.total = parseInt(res.data.totalRows);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    Refresh() {
      this.getCouponList();
    },
  },
  mounted() {},
  created() {
    this.Refresh();
  },
  watch: {
    centerDialogVisibleUse(newVal) {
      // 监听 centerDialogVisibleUse 的变化
      if (!newVal) {
        // 当 centerDialogVisibleUse 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
  },
};
</script>

<style lang="scss">
//商品添加model
.coponmodel {
  width: 100vw;
  height: 100vh;
  position: relative;
  .couponUse {
    width: 98%;
    margin-left: 1%;
    position: relative;
    .topButton {
      width: 100%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
    .paging {
      width: 99%;
      height: 50px;
      // background-color: antiquewhite;
      display: flex;
      align-items: end;
      justify-content: end;
    }
  }
  .el-dialog__footer {
    // position: sticky !important;
    text-align: center;
  }
}
</style>
